<!DOCTYPE html>
<html lang="index">
<head>
	<meta charset="UTF-8">
	<title>index</title>

	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<!-- top导航 -->
	<div class="top-bar">
		<span class="modus">MODUS</span>VERSUS
	
		<ul>
		<li><button class="search"></button></li>
		<li><a  class="top-bar-a" href="#">CONTACTS</a></li>
		<li><a class="top-bar-a"  href="#">FEATURES</a></li>
		<li><a class="top-bar-a"  href="#">BLOG</a></li>
		<li><a id="top_bar_a" class="top-bar-a" href="#" onmouseover=showDiv() onmouseout=showdown()>∨ PORTFOLIO</a>
		<div class="show-div" id="showButton">
			<a href="#">Portfolio 2 column page</a>
			<a href="#">Portfolio 2 column page</a>
			<a href="#">Portfolio 2 column page</a>
		</div>
		</li>
		<li><a  class="top-bar-a" href="#">SERVICES</a></li>
		<li><a  class="top-bar-a" href="#">ABOUT</a></li>
		<li class="home"><a href="#" >HOME</a></li>
		</ul>
		<div class="path-index"></div>
	</div>


<!-- 图片展现 -->
		<div id="container">
			<div id="imglist">
				<div class="slidpic" style="display: none; opacity: 0;">
					<a href="#"><img src="img/001.jpg" width="100%" height="500px"></a>	
				</div>
				<div class="slidpic" style="display: block; opacity: 1;">
					<a href="#"><img src="img/002.jpg" width="100%" height="500px"></a>
				</div>
				<div class="slidpic" style="display: none; opacity: 0;">
					<a href="#"><img src="img/003.jpg" width="100%" height="500px"></a>
				</div>		
			</div>
			<div id="buttons">
				<i id="prev">&lt;&lt;</i>
				<i id="next">&gt;&gt;</i>
			</div>
			
		</div>
        <ul id="slidot">
			<li class=""></li>
			<li class="on"></li>
			<li class=""></li>
		</ul>



<!-- 文字部分 -->
<div style="background: rgb(243,243,243);width:100%;height: 570px;" >
	<div style="height: 80px;"></div>
	<div class="content">
		<div class="view-more">
			<div><h1>Some of our top services</h1>
			<p>Ut eleifend libero sdfdjnnnnxcnnf f bdc s sf d s jdj  j fksj fj f f bff k fhfdjh fdf dfjdskfjs dfj nn nf</p></div>
			<div><button>VIEW MORE</button></div>
		</div>
		<div class="read-more">
			<div class="read-more-div susp" style="background: #fff;">
				<img src="img/大拇指.png">
				<span>SUSPENDISSE</span>
				<p>gjfkjdf sgkg kljdfofr i r eo t jdgkjd s kfjdjkc jgvkjfgkjg jkfgt ben j nfjds n nfdmnf mdk fnd  nf nd  nmdfn n dnfndf df  njdnfn njd n</p>
				<button style="background: #E2534B;">read more</button>
			</div>
			<div class="read-more-div mae">
				<img src="img/钥匙.png">
				<span>MAECENAS</span>
				<p>g jfkjd sgkgklj dfofrireot jdgkj dskfjdj kcjgv kjf gkjgjk</p>
				<button>read more</button>			
			</div>
			<div class="read-more-div ali">
				<img src="img/旗帜.png">
				<span>ALIQUAM</span>
				<p>gjf kjdsgk gkljdfo frireotjd gkjd skfjd jkcjgvk jfgkj gkm m mkm mflekr gjk</p>
				<button>read more</button>
			</div>
			<div class="read-more-div hab"><img src="img/水晶瓶.png"><span>HABITASSE</span>
			<p>gjf kjdsgkgk ljdfofr ireotjd gkjdskfj djk cjg vkjfgk j jfdoauer erjfhjh gjk</p>
			<button>read more</button>
			</div>
		</div>
	</div>
</div>
<!-- 图片展览区域 -->
<div style="background: #ECECEC; width: 100%;height: 410px;">
	<div class="path002"></div>
	<div class="why-content">
		<h1>
			WHY MODUS VERSUS ?
		</h1>
		<P>
			capfdfkdsfmn dfdkfj jdkfjkjf dkfjkdjfkj djfkdjfkj jdkfj dkfjpiwe afdne ekfx werek  fjdkf 
		</P>
	</div>
	<ul class="ul002">
		<li class="no01"><img src="img/001.png" width="350px" height="220px"></li>
		<li class="no02"><img src="img/002.png" width="450px" height="320px"></li>
		<li class="no03"><img src="img/003.png" width="350px" height="220px"></li>
	</ul>
</div>


<!-- 文字部分 -->
<div class="font-div">
	<div class="wcus">
		<h3>Why Choose Us ?</h3>
		<a href="#">➜ Qsdjei sdnKSNK KND</a>
		<a href="#">➜ Qsdjei sdnf fg KSNK KND</a>
		<a href="#">➜ Qsdjei sdnKf SNK KND</a>
		<a href="#">➜ Qsdjei sdnKS fgNK KND</a>
		<a href="#">➜ Qsdjei sdnKS NK KND</a>
		<a href="#">➜ Qsdjei sdnKS fg NK KND</a>
	</div>
	<div class="imgs">
		<p>
			dsfjn df dkfjqwo s dkjsewo cdfhsfjieyrff sjds sndhfjgf sdjfhasuiw hrg sdjk kdff akj jehrejw dfn kf ejrfhj sjdfh sdfj dknf alsauiw woixbcls w denlkwdc sidfjlwew sdk iwj dsd fsdsd dss
		</p>
		<div >
			<img src="img/50.png">
			<img src="img/70.png">
			<img src="img/80.png">
			<img src="img/100.png">
		</div>
	</div>
	<div class="font-div-h1">
		<h2>What Client's Say</h2>
		<p>Sdfdof dfjko evchao dheon dojf eojsdp jodof jfodfpwe jfeof ef eofk efoe e0rj cjdofoerj fjf ejjfef jcofje0wr-jf odfjwe0iefj lfklfgj erelk ekfd,d eldjriewk fkfgn oemkew nejoik jnk</p>
		<h3>Jhon Doe</h3>
	</div>
</div>

<!-- jquery -->
<div class="ohc">
	<div>
		<h2>Our Happy Clients</h2><img src="img/zhixian.png" class="zhixian"></div>
		<div id="buttons01">
				<i id="prev01"><img src="img/left.png" width="15px"></i>
				<i id="next01"><img src="img/right.png" width="15px"></i>
		</div>	
</div>

<div class="jquery">
	<div id="adimglist">
		<div class="slidpic01">
			<a href="#"><img src="img/jquery.png" width="160px" height="80px"></a>	
		</div>
		<div class="slidpic01" >
			<a href="#"><img src="img/jquery.png" width="160x" height="80px"></a>
		</div>
		<div class="slidpic01">
			<a href="#"><img src="img/jquery.png" width="160px" height="80px"></a>
		</div>	
		<div class="slidpic01">
			<a href="#"><img src="img/jquery.png" width="160px" height="80px"></a>
		</div>
		<div class="slidpic01">
			<a href="#"><img src="img/jquery.png" width="160px" height="80px"></a>
		</div>
		<div class="slidpic01">
			<a href="#"><img src="img/jquery.png" width="160px" height="80px"></a>
		</div>	
	</div>
</div>

<!-- 尾部 -->
<div class="foot">
	
	<div class="path003"></div>

	<div class="foot-cont">
			<div class="fo-co-left">
				<p><span class="modu">MODUS</span><span class="vers">VERSUS</span></p>
				<p class="mo-ver">djs fdsj fjsjbfjd sqw cifdhl sdw9jf sjsdf sjd fdpocn isdqdpos dfa fed0wjds vmnsdf sdkjosf csfei cj jwd of askdsnc e jdwsf jskfwqsa vjdfjqaxs kjsdfj </p>
				<div class="fon-sty"><p>Phone:<span>182 5648 4545</span></p>
				<p>
					e-mail:<span>info@modu.versus</span>
				</p></div>
			</div>
			<div class="fo-co-center1"><h2>Company</h2>
			<a href="#">> About</a>
			<a href="#">> FAQ</a>
			<a href="#">> Contact</a>
			<a href="#">> Terrrs</a>
			<a href="#">> Privacy</a>
			<a href="#">> Testmonials</a></div>
			<div class="fo-co-center2"><h2>Community</h2>
			<a href="#">> Blog</a>
			<a href="#">> Forum</a>
			<a href="#">> Support</a>
			<a href="#">> Newsletter</a></div>
			<div class="fo-co-right">
				<p class="from-the"><span>from the </span>BLOG</p>
				<div class="img"><img src="img/img.png"><span>sdjf dfjf osdfj sodfxcm jf mclkds mvkd</span><h6>26 May,2013</h6></div>
				<div class="img"><img src="img/img.png"><span>d vkfdjf odsf dfj vce9 vcdikvdf vdk dkf kp</span><h6>26 May,2013</h6></div>
			</div>	
	</div>
	<div class="footer">
		<p>2013 ModusVersus</p>
		<div><a href="#"><img src="img/face.png"></a>
		<a href="#"><img src="img/google.png"></a>
		<a href="#"><img src="img/ytube.png"></a>
		<a href="#"><img src="img/wifi.png"></a></div>
	</div>
</div>

</body>
<script type="text/javascript" src="index.js"></script>
</html>